/*** this file needs to be "cleaned up" because it contains a lot of extraneous stuff

/* Fractions */

    span.frac {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    span.frac > sup, span.frac > sub {
        display: block;
        font: inherit;
        padding: 0 0.3em;
    }
    span.frac > sup {border-bottom: 0.08em solid;}
    span.frac > span {display: none;}
  

/* The Modal (background) */
 
    .modal,
    .modal2 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 30px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    .modal2 {
        padding-top: 0px;
        display: block;
        background-color: lightgray;
    }
 
/* Modal Content, Header, and Footer */
 
    .modal-content,
    .modal2-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        height: auto;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }

    .modal2-content {
        width: 100%;
        height: 100%;
    }
 
    .modal-header,
    .modal2-header {
        padding: 2px 16px;
        background-color: #7a79ce;
        color: white;
        border-bottom: 2px solid black;
        text-align: center;
    }

    .modal2-header {
        height: 8%;
    }
 
    .modal-body,
    .modal2-body {
        padding: 24px 46px;
        font-size: 22px;
    }

    div.smallerText {
        font-size: 18px;
    }

    div.halfLine {
        height : 6px;
        /*border: 1px dashed black;*/
    }

    span.fixedFont {
        font-size: 18px;
        font-family: 'Courier New', Courier, monospace;
    }

    .modal2-body {
        height: 45%;
        overflow: auto;
    }
 
    .modal-footer,
    .modal2-footer {
        padding: 10px 46px;
        background-color: #5cb85c;
        font-size: 17px;
        color: white;
    }

    .modal2-footer {
        height: 37%;
        background-color: lightgrey;
        color: black;
    }
 
/* The Close Button (and equivalent Start button) */
 
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
 
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    button.startup {
        float : right;
        background-color: #7a79ce;
        border: medium;
        border-radius: 5px;
        padding: 8px 14px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        max-width:45%;
    }
 
    
 /*  The main application */

    .left {
        width: 66%;             /* playing with this was 66% */
        height:90%;
        float:left;
        margin-top: 6px;
    }

    .right{
        width: 32%;    /* playing with this was 32% */
        height:90%;
        float:right;
        margin-top: 6px;
    }

    div.inlineText {
        float: left;
        font-size: 14px;
    }
 
    div.inlineTextV2 {
        float:  left;
        font-size : 16px;
        padding:    4px 7px;
        /*margin-top: 20px;*/
        /*border: 2px solid black;
        border-top: 8px solid red;*/
    }

    div.inlineRJ {
        /* try this */
        float: left;
        font-size: 14px;
        width: 30%;
        text-align: right;
    }
 
    #shortExplanation {
        font-size: 19px;
        padding-bottom: .5em; /**/ /* changed here, was 4px */
/**/ /* changed here */
/*        border-bottom: 2px solid black;*/
    }
   
    .answer,
    .centerAnswer,
    .wideAnswer {
        width: 12%;
        float: left;
        font-size: 14px;
        font-weight: 700;
        text-align:center; /*right;*/
        margin: 0px 0px 8px 3px;
    }
 
    .centerAnswer {
        text-align: center;
        width: 20%;
    }

    div.answer,
    div.centerAnswer {
        border: 1px solid black;
        height: 1.3em;
    }

    .wideAnswer {
        width:30%;
    }
   
    div.keyboard {
        float: left;
        margin-left:2%;
        width:96%;
        margin-top:5%;
    }
 
    div.results {
        float: left;
        width:100%;             /* changed width to 100% and margin-left removed for dice problems */
        /*margin-left: 2%;*/
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 2%;
        min-height: 5.3em;
    }
   
    #solution {
        color: white;
    }
   
    .nKey,
    .nKeyPorC,
    .nKeyPorCNarrow,
    .nKeyLargerFont,
    .nKeyWide {
        width:28%;
        text-align:center;
        margin: .1em;
        background: #00d9ff;
        border-radius: 5px;
        font-size: 16px;
        font-weight:bold;
    }
 
    .nKeyLargerFont {
        font-size:20px;
        font-weight: bolder;
    }
 
    .nKeyWide {
        width:48%;
        font-size:15px;
        /**/ /* changed here */
        padding-top: .2em;
        padding-bottom: .2em;
    }
 
    .nKeyPorC,
    .nKeyPorCNarrow {
        background: #00d9aa;
    }

    .nKeyPorCNarrow {
        width: 21%;
    }

    button {
/*        background: #0084ff;
        border: medium;
        border-radius: 5px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: bold;
        color: #fff;
        max-width:45%;

this is from doug's stuff:    no max-width is the only difference I really see since I changed font-size from 14 to 13    */
background: #0084ff;
border: medium;
border-radius: 5px;
padding: 8px 14px;
font-size: 13px; /* 14px;*/
font-weight: bold;
color: #fff;

    }
   
    button.moveLineButt {
        width: 35px;
        border: medium black;
        border-radius: 5px;
        padding: 0px 0px;
        margin: 4px 0px 4px 0px;
        font-weight: bolder;
        font-size: 25px;
        background-color: lightskyblue;
        color: black;
    }

    button.moveTopBottomButt {
        width: 35px;
        border: medium;
        border-radius: 5px;
        padding: 0px 0px;
        margin: 4px 0px 4px 0px;
        font-weight: bolder;
        font-size: 25px;
        background-color: lightgreen;
        color: black;
    }

    button.moveToNButt {
        width: 25px;
        border: medium;
        border-radius: 5px;
        padding: 2px 2px;
        margin: 2px 5px 2px 0px;
        font-weight: bold;
        font-size: 18px;
        background-color: lightgreen;
        color: black;
    }

    button.removeButt {
        width: 75px;
        border: medium;
        border-radius: 5px;
        padding: 2px 0px;
        margin: 2px 0px 2px 0px;
        /*font-weight: bold;*/
        font-size: 16px;
        background-color: lightgreen;
        color: black;
        opacity: 0.25;
    }

    button.removeButtSample {
        width: 75px;
        border: medium;
        border-radius: 5px;
        padding: 2px 0px;
        margin: 2px 0px 2px 0px;
        /*font-weight: bold;*/
        font-size: 16px;
        background-color: lightgreen;
        color: black;
        opacity: 1.0;
    }

    button.x3x2x {
        width:28%;
        text-align:center;
        margin: .1em;
        background: #00d9ff;    /* was 00d9ff then 00aaff*/
        border-radius: 5px;
        font-size: 16px;
        font-weight:bold;
        color: black;
        padding: 3px;
    }

    button.checkNext {
        float : left;
        opacity : 1.0;
    }

    button#showStart {
        max-width: 95%;
    }

    button.someAll {
        background-color: #7a79ce;
        color: white;
        width:28%;
    }
 
    .arrowButt {
        background: rgb(49, 218, 49);
        border: medium;
        border-radius: 5px;
        padding: 4px 7px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        width: 30%;
        float:left;
    }
 
    .smallarrowButt {
        background: rgb(182, 84, 151);
        border: medium;
        border-radius: 5px;
        padding: 4px 7px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        width: 30px;
        float:left;
    }
 
    div.problem {
        width: 96%;
        margin-top: 5px; 
        margin-left: 2%;
        float: left;
        border-bottom: 1px solid black;
        font-size: 21px; /**/ /* maybe change this back - it was 18px*/
        min-height: 68px;  /**/ /* maybe make this larger, perhaps 120 or 140??? */
    }
 
    div.soln { 
        width: 96%; 
        margin-left: 2%;
        clear: left;
        float: left;
        font-size: 15px;
        min-height: 125px;
        /**/ /*changed here*/
        padding-top: .3em;
    }
 
    div.answers {
        float: left;  
        width: 96%;
        margin-left: 2%;
    }
 
    div.clearLeft, div.clearLeftUL {
        clear: left;
        border: 2px 0px 2px 0px;
    }

    div.floatRight {
        float: right;
        border: 2px 0px 2px 0px;
    }

    div.clearLeftUL {
        border-bottom: 3px solid black;
        width: 65%;
        margin-top: -4px;
        margin-bottom: 6px;
        /*float: right;*/
        margin-left: 28%;
        /*margin-right: 8%;*/

    }

    #outmsg {
/*        color:blue;*/
        font-size:14px;
        clear:left;
        /*border: 2px dashed black;*/
        border: 3px 3px;
    }
 
    div.buckets {
          /*border: 1px dashed black;*/
    }

    span.buckets {
        /*border: 1px dashed red;*/
/*        width: 100%;*/
    }

    #leftpart2 {
/*        border: 7px solid blue;*/
        float: left;
        width:96%;
        margin-left: 2%;
        margin-top: -5px;
/*        margin-bottom: -5px;*/
        margin-right: 2%;
        min-height: 5.3em;
        
    }

    #leftpart3 {
/*        border: 5px solid green;*/
        float: left;
        width:100%;
/*        margin-left: 2%;*/
        margin-top: -5px;
        margin-bottom: -15px;
        margin-right: 2%;
        min-height: 5.3em;
}

    h4 {
        text-align: center;
        font-size: 20px;
/**/ /* changed here */
        border-bottom: 2px solid black;
        padding-bottom: .1em;
        margin: .05em;  /* was 10px;*/
}
 
    #wholeBody {
        min-width: 400px;
        min-height: 400px;
    }
 
    #footer {
        border-top: 2px solid black;
        padding-top: 4px;
        clear: both;
        text-align: right;
    }
 

    /* The induction table */

    /*
            #in1, #in2, #in3 {
              width: 80%;
        }
        #in1div, #in2div, #in3div{
            width:15%;
            float: left;
        }
         
        div.inlineText {
            float: left;
            font-size: 13px;
        }
        
        input {
            text-align:right;
        }
        
        div.keyboard {
            float:left;
            width:40%;
        }
        
        div.solution {
            float: left;
            width: 45%;
        }

        div.spacer {
            width:10%;
            height: 300px;
            float: left;
            clear: left;
            color: white;
        }
        
        .nKey {
            width:15%;
            text-align:center;
            margin: .1em;
            background: #00d9ff;
            border-radius: 5px;
        }
        
        .nKeyWide {
            width:30%;
            text-align:center;
            margin: .1em;
            background: #00d9ff;
            border-radius: 5px;
        }
            
        button {
            background: #0084ff;
            border: medium;
            border-radius: 5px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
            
        .arrowButt {
            background: rgb(49, 218, 49);
            border: medium;
            border-radius: 5px;
            padding: 4px 7px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            width: 13%;
            float:left; 
        }
        
        #button {
            background: #0084ff;
            border: medium;
            border-radius: 5px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
           
        .row {
            padding-top: 10px;
            padding-left: 20px;
        }
*/
    div.larger {
        width: 96%;
        height: 120px;
        overflow-y: scroll;
        float: left;
        border-bottom: 1px solid black;
        font-size: 12px;
        margin-left: 2%;

    }

div.indHeader {
/*            width: 90%;
    float: left;
*/
    background-color: beige;

    width: 96%;
    margin-top: -5px; 
    margin-left: 2%;
    float: left;
    border-bottom: 1px solid black;
/*            font-size: 18px;*/


}
/* 
div.smaller {
    width: 5%;
    height: 280px;
    float: left;
    color: white;
}
*/ 
div.indNCol {
    width: 15%;
    text-align: center;
    float:left;
    clear: left;
}

div.indRecCol {
    width: 35%;
    text-align: left;
    float: left;
}

div.wideIndRecCol {
    width: 60%;
    text-align: left;
    float: left;
}

div.narrowIndRecCol {
    width: 10%;
    text-align: left;
    float: left;
}

div.indClCol {
    width: 35%;
    text-align: left;
    float: left;
}

div.wideIndClCol {
    width: 60%;
    text-align: left;
    float: left;
}

div.narrowIndClCol {
    width: 10%;
    text-align: left;
    float: left;
}

div.indClColHeader {
    width: 30%;
    text-align: left;
    float: left;
}

div.wideIndClColHeader {
    width: 60%;
    text-align: left;
    float: left;
}

div.indEqCol {
    width: 10%;
    text-align: center;
    float: left;
}

div.indEqColHeader {
    width: 15%;
    text-align: center;
    float: left;
}

p.highlightedPara {
    color: blue;
    font-weight: bolder;

}


body {
    font-family: sans-serif;
    font-size: 18px;
/*    background: #FFFFEE;*/
}

.row {
      padding: 10px;
}
  
button {
    background:  #0084ff;
    border: medium;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

button.highlightColumn {
    background: rgb(205, 90, 161);
}

#heading {
    height: 40px;
/*
    background: -webkit-linear-gradient(top, #666 0%,#000 100%);
    background: -o-linear-gradient(top, #666 0%,#000 100%);
    background: -moz-linear-gradient(top, #666 0%,#000 100%);
    background: -ms-linear-gradient(top, #666 0%,#000 100%);
    background: linear-gradient(to bottom, #666 0%,#000 100%);
*/
    font: 1.5em "Arial", sans-serif;
/*
    line-height: 50px;
*/
    color: #FFF;
    text-align: center;
    padding-bottom:10px;
}



  .fbregular {
    font-weight: normal;
    font-size: 18px;
    text-align: left;
  }

  .fbhangingindent {
    padding-left: 50px ;
    text-indent: -50px ;
    font-weight: normal;
    font-size: 18px;
    text-align: left;
  }

  .fbhangingindentindented {
      padding-left: 70px;
      text-indent: -20px;
      font-weight: normal;
      font-size: 18px;
    }

  .fbindented {
      padding-left: 50px;
      font-weight: normal;
      font-size: 18px;
    }


/*  Added specifically for the dice-related and other "experiment" problems */

    #divForDice, #divForCanvas {
        float:  left;
        width:  60%;
        /*background-color: #CCCCFF;*/
        min-height: 50px;
    }

    #divForCanvas {
        width: 70%;
    }

    #divForTable, #narrowDivForTable {
        float:  left;
        width:  38%;
        /*background-color: aquamarine;*/
        min-height: 50px;
    }

    #narrowDivForTable {
        width: 28%;
    }

    #divForN, #divForButtons1 {
        float:  left;
        width:  40%;
/*        background-color: #CCCCFF;  */
        min-height: 50px;
    }

    #divForClose, #divForButtons2 {
        float:  left;
        width:  58%;
/*       background-color: aquamarine;*/
        min-height: 50px;
    }

    #divForNPeople {
        float:  left;
        width:  98%;
    }

    #divForBirthdays {
        float:  left;
        width:  98%;
        min-height: 150px;
    }

    #divForMatrixInput, #divForMatrixOutput {
        float:  left;
        width:  98%;
        min-height: 350px;
        /*background-color: #CCCCFF;  */
    }
/*
    #divForBirthdays > td {
        font-size:  2px;
    }
*/

div.diceTableHeader70 {
    background-color: beige;
    width: 70%;
    margin-top: 5px; 
    margin-left: 12%;
    float: left;
    border: 1px solid black;
    /*            font-size: 18px;*/

}

div.diceTableHeader98 {
    background-color: beige;
    width: 98%;
    margin-top: 5px; 
    margin-left: 12%;
    float: left;
    border: 1px solid black;
    font-size: 15px;

}

div.diceTableCol45L {
    width: 45%;
    text-align: center;
    float:left;
    clear: left;
}

div.diceTableCol45 {
    width: 45%;
    text-align: center;
    float:left;
}

div.diceTableCol30L {
    width: 30%;
    text-align: center;
    float:left;
    clear: left;
}

div.diceTableCol30 {
    width: 30%;
    text-align: center;
    float:left;
}

div.diceTableBody70, div.diceTableBody98, div.diceTableBody70Tall {
    width: 70%;
    height: 150px;
    overflow-y: scroll;
    float: left;
    border: 1px solid black;
    font-size: 15px;
    margin-left: 12%;

}

div.diceTableBody70Tall {
    height: 200px;
}

div.diceTableBody98 {
    width: 98%;
}

/*
div.diceTableCol1 {
    width: 45%;
    text-align: center;
    float:left;
    clear: left;
}

div.diceTableCol2 {
    width: 45%;
    text-align: center;
    float:left;
}
*/

div.newlineSmallHiddenText {
    clear: left;
    font-size: 10px;
    visibility: hidden;
}

#finalResults {
    font-size: 18px;
}

.centeredButton {
    margin-left: 30%;
}

/* Override previous values for this app, and add new classnames */

span.shrinkText {
    font-size: 16px;
}